<script setup lang="ts">
import { onMounted, provide, ref } from "vue";
import { onBeforeRouteUpdate, useRoute } from "vue-router";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
import type { RouteLocationNormalized } from "vue-router";
import type { Ref, ComputedRef } from "vue";
import type { GoodDetail, Spec, Sku as sku, selectSku } from "@/types/detailTypes/detailTypes.ts";
import type { ShopCart } from "@/types/shopCartTypes/shopCartTypes.ts";
import useDetailStore from "@/pinia/modules/detailStore/detailStore.ts";
import useShopCartStore from "@/pinia/modules/shopCartStore/shopCartStore.ts";
import Relevant from "@/views/detail/components/relevant/relevant.vue";
import detailBread from "@/views/detail/components/detailBread/detailBread.vue";
import Zoom from "@/views/detail/components/zoom/zoom.vue";
import Sales from "@/views/detail/components/sales/sales.vue";
import Info from "@/views/detail/components/info/info.vue";
import Sku from "@/views/detail/components/sku/sku.vue";
import Count from "@/components/lib/Count.vue";
import Button from "@/components/lib/Button.vue";
import Tabs from "@/views/detail/components/tabs/tabs.vue";
import Warn from "@/views/detail/components/warn/warn.vue";
import Hot from "@/views/detail/components/hot/hot.vue";

const route: RouteLocationNormalized = useRoute();

const detailStore = useDetailStore();

const shopCartStore = useShopCartStore();

const { mainPictures, goodDetail, specs, skus, relevantList }: { mainPictures: ComputedRef<string[]>, goodDetail: Ref<GoodDetail>, specs: ComputedRef<Spec[]>, skus: ComputedRef<sku[]>, relevantList: Ref<any[]> } = storeToRefs(detailStore);


const skuInfo = ref<selectSku>({} as selectSku);

const count = ref<number>(1);

const getSkuInfo = (sku: selectSku) => {
   if (sku.skuId) {
      goodDetail.value.price = sku.price;
      goodDetail.value.oldPrice = sku.oldPrice;
      goodDetail.value.inventory = sku.inventory;
      skuInfo.value = sku;
   }
};

const addShopCart = async () => {
   if (skuInfo.value.skuId) {
      try {
         const good = {
            id: goodDetail.value.id,
            skuId: skuInfo.value.skuId,
            name: goodDetail.value.name,
            picture: goodDetail.value.mainPictures[0],
            price: skuInfo.value.price,
            nowPrice: skuInfo.value.price,
            count: count.value,
            attrsText: skuInfo.value.specsText,
            selected: true,
            isEffective: true,
            stock: skuInfo.value.inventory,
         };
         await shopCartStore.addShopCart(good as any);
         ElMessage.success("加入购物车成功");
      } catch (error: any) {
         ElMessage.error(error.message);
      }
   } else {
      ElMessage.warning("请选择完整的规格");
   }
};


onMounted(() => {
   detailStore.fetchGoodDetail(route.params.id as string);
   detailStore.fetchRelevantList((route.params.id as string), 16);
});


onBeforeRouteUpdate((to, from, next) => {
   next();
   detailStore.fetchGoodDetail(to.params.id as string);
});

provide<"goodDetail", Ref<GoodDetail>>("goodDetail", goodDetail);

</script>

<template>
   <div class='goods-page'>
      <div class="container">
         <!-- 面包屑 -->
         <detail-bread></detail-bread>
         <!-- 商品信息 -->
         <div class="goods-info">
            <div class="media">
               <!--放大镜组件-->
               <zoom :images="mainPictures"></zoom>
               <!--商品购买信息组件-->
               <sales></sales>
            </div>
            <div class="spec">
               <template v-if="detailStore.goodDetail.id">
                  <!--商品基本信息组件-->
                  <info :good-detail="goodDetail" :specs-text="skuInfo.specsText"></info>
                  <!--sku商品规则组件-->
                  <sku :specs="specs" :skus="skus" @change="getSkuInfo"></sku>
                  <!--数量选择组件-->
                  <count v-model="count" :max="goodDetail.inventory" :min="1" label="数量"></count>
                  <!--加入购物车-->
                  <Button size="middle" type="primary" @click="addShopCart">加入购物车</Button>
               </template>
               <template v-else>
                  <div class="loading">
                     <img src="../../assets/images/loading.gif" alt="">
                  </div>
               </template>
            </div>
         </div>
         <!-- 商品推荐 -->
         <Relevant :good-id="goodDetail.id" :list="relevantList"></Relevant>
         <!--猜你喜欢-->
         <Relevant :list="relevantList"></Relevant>
         <!-- 商品详情 -->
         <div class="goods-footer">
            <div class="goods-article">
               <!-- 商品+评价 -->
               <div class="goods-tabs" v-if="goodDetail.id">
                  <tabs></tabs>
               </div>
               <!-- 注意事项 -->
               <div class="goods-warn">
                  <warn></warn>
               </div>
            </div>
            <!-- 24热榜+专题推荐 -->
            <div class="goods-aside">
               <hot v-for="(item) in 3" :type="item" :good-id="goodDetail.id"></hot>
            </div>
         </div>
      </div>
   </div>
</template>


<style scoped lang="less">
.goods-info {
   min-height: 600px;
   background: #fff;
   position: relative;
   display: flex;

   .media {
      width: 580px;
      height: 600px;
      padding: 30px 50px;
   }

   .spec {
      flex: 1;
      padding: 30px 30px 30px 0;

      .button {
         margin-top: 20px;
         margin-left: 10px;
      }

      .loading {
         width: 100%;
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;

         img {
            width: 100px;
         }
      }
   }
}

.goods-footer {
   display: flex;
   margin-top: 20px;

   .goods-article {
      width: 940px;
      margin-right: 20px;
   }

   .goods-aside {
      width: 280px;
      min-height: 1000px;
   }
}

.goods-tabs {
   min-height: 600px;
   background: #fff;
}

.goods-warn {
   min-height: 600px;
   background: #fff;
   margin-top: 20px;
}
</style>
